<template>
	<view class="pb-4 bg-cF6F7FB min-vh-100" style="padding-top: 24rpx;">
		<catalogue></catalogue>
		<template  v-if="examples.length">
			<view class="list " v-for="v,i in examples" :key="i">
				<view class="bg-white brs-8" @tap="jumpGO(`website/casePresentationDetail?id=${v.id}`)">
					<image :src="v.coverimage" mode="" style="height: 512rpx;"></image>
					<view class="title">{{v.name}}</view>
					<view class="type d-flex">
						<view class="">
							类型-{{v.softtype}}
						</view>
						<view class="">
							行业-{{v.industrytype}}
						</view>
					</view>
					<view class="d-flex num justify-content-between pb-2">
						<view class="d-flex align-items-center ">
							<image src="../../static/website/view.svg" mode=""></image>
							<text class="case_num">{{v.viewcount}}</text>
						</view>
						<view class="d-flex align-items-center" @click.stop="toggleLikeexample_throttle(v)">
							<image :src="vuex_likeexample.includes(v.id) ? '../../static/website/collect.svg' : '../../static/website/collect-no.svg'" mode=""></image>
							<text class="case_num">{{v.likecount}}</text>
						</view>
						<view class="d-flex align-items-center" @click.stop="toggleSaveexample_throttle(v)">
							<image :src="vuex_saveexample.includes(v.id) ? '../../static/website/star-fill.svg' : '../../static/website/star.svg'" mode=""></image>
							<text class="case_num">{{v.savecount}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view class="d-flex  align-items-center flex-column w-100 h-100 py-5" v-else>
			<view class="" style="width: 320rpx;height: 320rpx;">
				<image src="../../static/website/empty.png" class="w-100 h-100" mode=""></image>
			</view>
			<view class="text-16px" style="color: #CDD9ED;">暂无收藏案例</view>
		</view>
	</view>
</template>

<script>
	import {
		http_getMySavedExample,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				examples: [],
			}
		},
		onLoad() {
			uni.hideShareMenu()
			http_getMySavedExample()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.examples = res.data.examples
					}
				})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.case_num {
		font-size: 24rpx;
		color: #909193;
		padding-left: 8rpx;
	}
	.list{
		.bg-white{
			background: #fff;
		}
		padding: 0 24rpx 32rpx;
		border-radius: 16rpx;
		image{
			width: 100%;
			height: 256px;
			border-radius: 16rpx 16rpx 0px 0px;
		}
		.title{
			font-size: 36rpx;
			color: #303133;
			line-height: 50rpx;
			padding-left: 34rpx;
			padding-top: 24rpx;
		}
		.type{
			font-size: 24rpx;
			font-weight: 300;
			color: #909193;
			line-height: 34rpx;
			>view{
				padding-left: 32rpx;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
			}
		}
		.num{
			padding: 0 32rpx;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.line{
		height: .5px;
		flex: 1;
		background: red;
		background: #909193;
	}
</style>
